<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>register</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="/js/register/register_head.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/register/register.css">
</head>
<body>
<div class="page">
    <div class="container">
        <form action="/Register" method="post">
            <h2>Register</h2>
            <div>
                <label for="username" class="label">用户名</label>
                <input type="text" id="username" name="username" th:value="${username}" placeholder="Enter your username" required>
            </div>

            <div class="message"></div>

            <div>
                <label for="password" class="label">密码</label>
                <input type="password" id="password" name="password" th:value="${password}" placeholder="Enter your password" required>
            </div>

            <div class="message">
                <div id="warming1"></div>
            </div>

            <div>
                <label for="pwdConfirm" class="label">确认密码</label>
                <input type="password" id="pwdConfirm" th:value="${password}" placeholder="Enter your password  again" required>
            </div>

            <div class="message">
                <div id="warming2"></div>
            </div>

            <div>
                <label for="email" class="label">邮箱</label>
                <input type="email" id="email"  name="email" th:value="${email}" placeholder="Enter your e-mail" required>
            </div>

            <div class="message"></div>

            <div class="verifyContent">
                <div class="verifyInfo">
                    <button id="changeCode" type="button">
                        <img id="imagine" src="/verifyCode" alt="#"/>
                    </button>
                    <input type="text" id="verifyCode" name="verifyCode" placeholder="verify code">
                </div>
            </div>

            <div class="message">
                <div id="warming3" th:utext="${message1}">
                </div>
            </div>
            <button type="submit" id="register">注册</button>

            <div class="info-contain">
                <div id="info" th:style="'color: ' +(${color} ? '#6BBD2D' : '#EF0209')" th:utext="${message}">
                </div>
            </div>

            <div id="return_login">
                <a href="/Login">返回登录页面</a>
            </div>
        </form>
    </div>
</div>
<div class="background" th:style="'background-image: url(\''+${Web}+'/registerRes/register_bkg.png\');'"></div>

<script>
    let inactive_color="#bdbdbd";
    let active_color="#00f0ff";
    let sign=true;//true设置按钮不可按 false 设置按钮可按
    $style_id("register").backgroundColor=inactive_color;

    if(!$value_id_is_null("username")&&!$value_id_is_null("password")&&!$value_id_is_null("pwdConfirm")&&!$value_id_is_null("email")&&$value_id_is_equal("password","pwdConfirm"))//如果开始状态的用户名 密码 确认密码 邮箱 不为空 且密码与确认密码相等
    {
        $style_id("register").backgroundColor=active_color;
        $id("register").disabled=false;//取消禁用
    }

    window.addEventListener('focus', function() //如果当前页面聚焦,那么自动刷新一次验证码
    {
        fetch('/verifyCode')
            .then(response => response.blob()) // 将响应数据转换为 Blob 对象
            .then(blob => {
                $id("imagine").src= URL.createObjectURL(blob);//刷新图片
            })
            .catch(error => {// 处理请求错误
                console.error('请求错误:', error);
            });
        $value_clear("verifyCode");//清除验证码
        $text_clear("warming3");//清除验证码警告
    });

    $id("changeCode").addEventListener('click', function()//点击刷新验证码图片
    {
        fetch('/verifyCode')
            .then(response => response.blob()) // 将响应数据转换为 Blob 对象
            .then(blob => {
                $id("imagine").src= URL.createObjectURL(blob);//刷新图片
            })
            .catch(error => {// 处理请求错误
                console.error('请求错误:', error);
            });
        $value_clear("verifyCode");//清除验证码
        $text_clear("warming3");//清除验证码警告
    });

    $id("verifyCode").addEventListener('input',function (event)//监听验证码输入
    {
        $text_clear("warming3");//清除验证码警告
    });

    $id('username').addEventListener('input',function (event)//监听用户名输入
    {
        $text_clear("info");//清除注册提示信息
        if(!$value_id_is_equal("password","pwdConfirm"))//密码和确认密码不匹配时按钮不激活
        {
            $style_id("register").backgroundColor=inactive_color;
            sign=true;
        }
        else if($value_id_is_null("username")||$value_id_is_null("email")||$value_id_is_null("password")||$value_id_is_null("pwdConfirm"))//用户名 密码 确认密码 邮箱其中一个为空 按钮不激活
        {
            $style_id("register").backgroundColor=inactive_color;
            sign=true;
        }
        else//其他情况按钮激活
        {
            $style_id("register").backgroundColor=active_color;
            sign=false;
        }
        $id("register").disabled=sign;//设置按钮的激活状态
    });

    $id("password").addEventListener('input',function (event)//监听密码输入
    {
        var input = event.target;
        if (!$value_is_equal($value_id("pwdConfirm"),$value_object(input)))//密码不等于确认密码 按钮不激活
        {
            sign=true;
            $style_id("register").backgroundColor=inactive_color;
            if(!$value_is_null($value_object(input))&&$value_id_is_null("pwdConfirm"))//有密码,但没确认密码
            {
                $text_clear("warming1");//清除密码警告
                $text_clear("warming2");//清除确认密码警告
            }
            else if($value_is_null($value_object(input))&&!$value_id_is_null("pwdConfirm"))//没密码,但有确认密码
            {
                $text_insert("warming1","请输入密码");//设置密码警告
                $text_clear("warming2");//清除确认密码警告
            }
            else//有密码和有确认密码,但密码不匹配确认密码
            {
                $text_clear("warming1");//清除密码警告
                $text_insert("warming2","密码不匹配,请重新输入密码");//设置确认密码警告
            }
        }
        else//密码等于确认密码
        {
            if($value_id_is_null("username")||$value_id_is_null("email")||$value_id_is_null("password")||$value_id_is_null("pwdConfirm"))//用户名 密码 确认密码 邮箱其中一个为空 按钮不激活
            {
                $style_id("register").backgroundColor=inactive_color;
                sign=true;
            }
            else//其他情况设置按钮激活
            {
                $style_id("register").backgroundColor=active_color;
                sign=false;
            }
            $text_clear("warming1");//取消密码警告
            $text_clear("warming2");//取消确认密码警告
        }
        $id("register").disabled = sign;
    });

    $id("pwdConfirm").addEventListener('input', function(event)//监听确认密码输入
    {
        // 获取输入值
        var input= event.target;
        !$value_is_equal($value_id("password"),$value_object(input))
        if (!$value_is_equal($value_id("password"),$value_object(input)))//密码与确认密码不匹配
        {
            $style_id("register").backgroundColor=inactive_color;
            sign=true;
            if($value_id_is_null("password")&&!$value_is_null($value_object(input)))//密码为空,确认密码不为空
            {
                $text_insert("warming1","请输入密码");
                $text_clear("warming2");
            }
            else if (!$value_id_is_null("password")&&$value_is_null($value_object(input)))//密码不为空,确认密码为空
            {
                $text_clear("warming1");
                $text_insert("warming2","请输入密码");
            }
            else//密码和确认密码都不为空,但密码和确认密码不匹配
            {
                $text_clear("warming1");
                $text_insert("warming2","密码不匹配,请重新输入密码");
            }
        }
        else//密码与确认密码匹配
        {
            if($value_id_is_null("username")||$value_id_is_null("email")||$value_id_is_null("password")||$value_id_is_null("pwdConfirm"))//用户名 密码 确认密码 邮箱其中一个为空 按钮不激活
            {
                $style_id("register").backgroundColor=inactive_color;
                sign=true;
            }
            else//其他情况 按钮激活
            {
                $style_id("register").backgroundColor=active_color;
                sign=false;
            }
            $text_clear("warming1")//取消密码警告
            $text_clear("warming2");//取消确认密码警告
        }
        $id("register").disabled = sign;
    });

    $id("email").addEventListener('input', function(event) {//监听邮箱输入
        if($value_id_is_null("username")||$value_id_is_null("email")||$value_id_is_null("password")||$value_id_is_null("pwdConfirm"))////用户名 密码 确认密码 邮箱其中一个为空 按钮不激活
        {
            $style_id("register").backgroundColor=inactive_color;
            sign=true;
        }
        else
        {
            $style_id("register").backgroundColor=active_color;
            sign=false;
        }
        $id("register").disabled = sign;
    });
</script>
</body>
</html>
